<script setup lang="ts">
import { ref, watch } from 'vue';
type MsgBanner = {
  id: string;
  imgUrl: string;
};
const props = defineProps({
  //传递数组渲染
  imgList: {
    type: Array<MsgBanner>,
    required: true,
  },
  //轮播图变换时间
  duration: {
    type: Number,
    default: 3000,
  },
  autoPlay: {
    type: Boolean,
    default: false,
  },
});
const index = ref(0);
let timer = -1;
type autoType = () => void;
// 轮播图运行判断
const auto: autoType = () => {
  clearInterval(timer);
  timer = setInterval(() => {
    index.value++;

    if (index.value >= props.imgList.length) {
      index.value = 0;
    }
  }, props.duration);
};
watch(
  //侦听具体属性，立即执行
  () => props.imgList,
  (newVal) => {
    if (newVal.length && props.autoPlay) {
      auto();
    }
  },
  { immediate: true }
);

const stop = () => {
  if (timer) clearInterval(timer);
};
const start = () => {
  if (props.imgList.length && props.autoPlay) {
    auto();
  }
};
//点击小点切换
const changeImg = (indexNum: number) => {
  clearInterval(timer);
  index.value = indexNum;
};
//上一张
const previous = () => {
  clearInterval(timer);
  if (index.value < 1) return (index.value = 4);
  index.value = index.value - 1;
};
//下一张
const next = () => {
  clearInterval(timer);
  if (index.value > 3) return (index.value = 0);
  index.value = index.value + 1;
};
</script>

<template>
  <div class="banner" @mouseenter="stop()" @mouseleave="start()">
    <div class="previous" @click="previous">&lt;</div>
    <div class="next" @click="next">></div>
    <ul class="parent-img">
      <li
        class="img-item"
        :class="{ opc: i === index }"
        v-for="(item, i) in imgList"
        :key="item.id"
      >
        <router-link to="/">
          <img class="router-img" :src="item.imgUrl" alt="" />
        </router-link>
      </li>
    </ul>
    <div class="footer" style="z-index: 999">
      <span
        v-for="(item, itemIndex) in imgList"
        :key="itemIndex"
        :class="{ active: itemIndex === index }"
        @click="changeImg(itemIndex)"
      >
      </span>
    </div>
  </div>
</template>

<style scoped lang="less">
.banner {
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  &:hover .next {
    display: block;
  }
  &:hover .previous {
    display: block;
  }
}
span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  margin-right: 8px;
}
.img-item {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.opc {
  opacity: 1;
  z-index: 1;
}
li > img {
  z-index: 1;
  width: 100%;
  height: 100%;
}
.footer {
  position: absolute;
  bottom: 22px;
  left: 45%;
}
.active {
  background-color: #fff;
}
.router-img {
  z-index: 5;
}
.previous {
  width: 44px;
  height: 44px;
  position: absolute;
  left: 20px;
  top: 228px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  display: none;
  cursor: pointer;
}
.next {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 20px;
  top: 228px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  display: none;
  cursor: pointer;
}
</style>
